<template>
  <div>
    <hd-tab :tabs="tabs"/>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>普通会员</span>
      </div>
      <el-table
          :data=users.data
          border
          size="mini"
          style="width: 100%">
        <el-table-column
            label="ID"
            prop="id"
            width="80">
        </el-table-column>

        <el-table-column
            label="名称"
            prop="name"
        >
        </el-table-column>
        <el-table-column
            label="手机号"
            prop="mobile"
        >
        </el-table-column>
        <el-table-column
            label="邮箱"
            prop="email"
        >
        </el-table-column>
        <el-table-column
            #default="{row:user}"
            label="操作"
            width="200">
          <el-button-group>
            <el-button size="mini" type="primary" @click="edit(user)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(user)">删除</el-button>
          </el-button-group>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            v-if="users.meta"
            :current-page="users.meta.current_page"
            :page-size="10"
            :total="users.meta.total"
            background
            layout="total,prev, pager, next"
            @current-change="page"
        >
        </el-pagination>
      </div>

    </el-card>

  </div>
</template>

<script>
import tabs from './tabs'

export default {
  route: {name: 'admin.user.index', meta: {title: '普通会员'}},
  data() {
    return {
      users: [],
      tabs
    }
  },
  async created() {
    await this.load()
  },
  methods: {
    async page(page = 1) {
      let url = `admin/user?page=${page}`
      this.users = await this.axios.get(url);
    },
    //加载评论
    async load() {
      this.users = await this.axios.get(`admin/user`);
    },
    del(user) {
      this.$confirm('确定删除吗？', '提示').then(async () => {
        await this.axios.delete(`admin/user/${user.id}`)
        this.users.splice(this.users.indexOf(user), 1)
      })
    },
    edit(user) {
      this.$router.push({name: 'admin.user.edit', params: {id: user.id}});
    }
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
